import _ from 'lodash';
import React from 'react';
import { StatusBar } from 'react-native';
import { TYSdk, NavigatorLayout, TopBar } from 'tuya-panel-kit';
import composeLayout from './composeLayout';
import { store } from './redux/configureStore';
import Home from './containers/home';
import Setting from './containers/setting';
// import Timing from './containers/timing';
import ErrorList from './containers/errorList';
// import Light from './containers/light';
import Res from './res';
import HelpList from './containers/helpList';
import VideoList from './containers/videoList';
import FilterMaterialView from './containers/filterMaterial';
import LightMode from './containers/lightMode';
import CustomLight from './containers/customLight';
import TempSetting from './containers/tempSetting';
import LightTimer from './containers/lightTimer';
import LightTimerEdit from './containers/lightTimerEdit';
import FeedTimer from "./containers/feedTimer";
import FeedTimerEdit from "./containers/feedTimerEdit";
import FeedRecord from "./containers/feedRecord";
import DoNotDisturb from "./containers/doNotDisturb";
import FilterList from "./containers/filterList";
import Help from "./containers/help";

console.disableYellowBox = true;

class MainLayout extends NavigatorLayout {
  constructor(props) {
    super(props);
    if (__DEV__) {
      console.log('TYSdk :', TYSdk);
    }
  }

  _handleTabChange = (tab: string) => {
    const _navigator = TYSdk.Navigator;
    if (tab === 'right') {
      TYSdk.native.showDeviceMenu();
    } else if (_navigator && _navigator.getCurrentRoutes().length > 1) {
      _navigator.pop();
    } else {
      TYSdk.native.back();
    }
  };

  /**
   *
   * @desc
   * hookRoute 可以在这里针对特定路由做一些控制处理
   *
   * @param {Object} route
   * @return {Object} - 提供给当前页面组件父容器布局的一些控制值
   * {
   * style: ViewPropTypes.style, // 容器样式，可在此调整背景颜色
   * background: backgroundImage | linearGradientBackground, // 面板图片背景或渐变背景，渐变格式可参考LinearGradient和RadialGradient组件
   * topbarStyle: ViewPropTypes.style, // TopBar 样式，可在调整TopBar背景色
   * topbarTextStyle: Text.propTypes.style, // TopBar的文字样式
   * renderTopBar: () => {}, // 自定义渲染TopBar
   * hideTopbar: true | false,   // 控制是否隐藏 TopBar
   * renderStatusBar: () => {}, // 自定义渲染StatusBar，IOS only
   * showOfflineView: true | false, // 控制是否渲染 OfflineView
   * OfflineView: ReactComponent, // 自定义的 OfflineView 组件
   * }
   */
  // eslint-disable-next-line
  hookRoute(route) {
    switch (route.id) {
      case 'main':
        // eslint-disable-next-line
        route.title = TYSdk.devInfo.name;
        break;

      // case 'timing':
      //   // eslint-disable-next-line
      //   route.title = '定时关闭';
      //   break;

      // case 'light':
      //   // eslint-disable-next-line
      //   route.title = ' ';
      //   break;

      default:
        break;
    }

    const linearGradientBackground = {
      '3%': '#FFFFFF',
      '90%': '#FFFFFF',
    };

    return {
      topbarStyle: { backgroundColor: 'transparent' },
      // topbarTextStyle: { color: '#fff' },
      background: linearGradientBackground, // require('./res/background.jpg'),
      showOfflineView: true,
      renderTopBar: () => {
        const uiPhase = _.get(this, 'props.devInfo.uiPhase') || 'release';
        const actions = [
          {
            accessibilityLabel: 'TopBar_Btn_RightItem',
            source: Res.edit,
            onPress: () => this._handleTabChange('right'),
          },
          uiPhase !== 'release' && {
            accessibilityLabel: 'TopBar_Preview',
            style: {
              backgroundColor: '#57DD43',
              borderWidth: 1,
            },
            contentStyle: { fontSize: 12 },
            color: '#000',
            source: 'Preview',
            disabled: true,
          },
        ].filter(v => !!v);
        // 右上角编辑按钮
        const editAction = [
          {
            accessibilityLabel: 'TopBar_Btn_RightItem',
            source: Res.fedit,
            onPress: () => this._handleTabChange('right'),
          },
          uiPhase !== 'release' && {
            accessibilityLabel: 'TopBar_Preview',
            style: {
              backgroundColor: '#57DD43',
              borderWidth: 1,
            },
            contentStyle: { fontSize: 12 },
            color: '#000',
            source: 'Preview',
            disabled: true,
          },
        ].filter(v => !!v);
        const actionBack = [
          uiPhase !== 'release' && {
            accessibilityLabel: 'TopBar_Preview',
            style: {
              backgroundColor: '#57DD43',
              borderWidth: 1,
            },
            contentStyle: { fontSize: 12 },
            color: '#000',
            source: 'Preview',
            disabled: true,
          },
        ].filter(v => !!v);
        // return (
        //   <TopBar
        //     title={route.title || ''}
        //     actions={
        //     route.id === 'main' ? actions :actionBack
        //     // route.id === 'main' ? actions : route.id === 'lightTimer' ? editAction :actionBack
        //   }
        //     onBack={() => this._handleTabChange('left')}
        //     // onPress={() => this._handleTabChange('right')}
        //   />
        // );
      },
      renderStatusBar: () => <StatusBar barStyle="default" />,
    };
  }

  /**
   * @desc
   * 在此可以通过route中的id来判断使用哪个页面组件，
   * 此外如果有额外的props需要传递给页面组件的，可以在此进行传递。
   *
   * @param {Object} route - route对象
   * @param {object} navigator - Navigator对象，具体使用方法可参考https://facebook.github.io/react-native/docs/0.43/navigator.html
   */
  renderScene(route, navigator) {
    let component;
    let schema = {};
    const { dispatch, devInfo, dpState, logs } = this.props;

    if (!_.isEmpty(devInfo)) {
      schema = devInfo.schema || {};
    }

    if (route.element) {
      const H5WebView = route.element;
      return <H5WebView navigator={navigator} {...route} />;
    }

    switch (route.id) {
      case 'main':
        component = (
          <Home
            dpData={{ state: dpState, schema }}
            dispatch={dispatch}
            navigator={navigator}
            logs={logs}
            {...route}
          />
        );
        break;

      case 'timing':
        component = (
          <Timing
            dpData={{ state: dpState, schema }}
            dispatch={dispatch}
            navigator={navigator}
            logs={logs}
            {...route}
          />
        );
        break;

      case 'setting':
        component = (
          <Setting
            dpData={{ state: dpState, schema }}
            dispatch={dispatch}
            navigator={navigator}
            logs={logs}
            {...route}
          />
        );
        break;

      case 'errorList':
        component = (
          <ErrorList
            dpData={{ state: dpState, schema }}
            dispatch={dispatch}
            navigator={navigator}
            logs={logs}
            {...route}
          />
        );
        break;

      // case 'light':
      //   component = (
      //     <Light
      //       // dpData={{ state: dpState, schema }}
      //       // dispatch={dispatch}
      //       navigator={navigator}
      //       logs={logs}
      //       {...route}
      //     />
      //   );
      //   break;

      case 'helpList':
        component = (
          <HelpList
            dpData={{ state: dpState, schema }}
            dispatch={dispatch}
            navigator={navigator}
            logs={logs}
            {...route}
          />
        );
        break;

      case 'videoList':
        component = (
          <VideoList
            dpData={{ state: dpState, schema }}
            dispatch={dispatch}
            navigator={navigator}
            logs={logs}
            {...route}
          />
        );
        break;

      case 'filterList':
        component = (
          <FilterList
            dpData={{ state: dpState, schema }}
            dispatch={dispatch}
            navigator={navigator}
            logs={logs}
            {...route}
          />
        );
        break;

      case 'filterView':
        component = (
          <FilterMaterialView
            dpData={{ state: dpState, schema }}
            dispatch={dispatch}
            navigator={navigator}
            logs={logs}
            {...route}
          />
        );
        break;

      case 'lightMode':
        component = (
          <LightMode
            dpData={{ state: dpState, schema }}
            dispatch={dispatch}
            navigator={navigator}
            logs={logs}
            {...route}
          />
        );
        break;

      case 'customLight':
        component = (
          <CustomLight
            dpData={{ state: dpState, schema }}
            dispatch={dispatch}
            navigator={navigator}
            logs={logs}
            {...route}
          />
        );
        break;

      case 'tempSetting':
        component = (
          <TempSetting
            dpData={{ state: dpState, schema }}
            dispatch={dispatch}
            navigator={navigator}
            logs={logs}
            {...route}
          />
        );
        break;

      case 'lightTimer':
        component = (
          <LightTimer
            dpData={{ state: dpState, schema }}
            dispatch={dispatch}
            navigator={navigator}
            logs={logs}
            {...route}
          />
        );
        break;

      case 'lightTimerEdit':
        component = (
          <LightTimerEdit
            dpData={{ state: dpState, schema }}
            dispatch={dispatch}
            navigator={navigator}
            logs={logs}
            {...route}
          />
        );
        break;

      case 'feedTimer':
        component = (
          <FeedTimer
            dpData={{ state: dpState, schema }}
            dispatch={dispatch}
            navigator={navigator}
            logs={logs}
            {...route}
          />
        );
        break;

      case 'feedTimerEdit':
        component = (
          <FeedTimerEdit
            dpData={{ state: dpState, schema }}
            dispatch={dispatch}
            navigator={navigator}
            logs={logs}
            {...route}
          />
        );
        break;

      case 'feedRecord':
        component = (
          <FeedRecord
            dpData={{ state: dpState, schema }}
            dispatch={dispatch}
            navigator={navigator}
            logs={logs}
            {...route}
          />
        );
        break;

      case 'doNotDisturb':
        component = (
          <DoNotDisturb
            dpData={{ state: dpState, schema }}
            dispatch={dispatch}
            navigator={navigator}
            logs={logs}
            {...route}
          />
        );
        break;

      case 'help':
        component = (
            <Help
                dpData={{ state: dpState, schema }}
                dispatch={dispatch}
                navigator={navigator}
                logs={logs}
                {...route}
            />
        );
        break;

      default:
        break;
    }

    return component;
  }
}

export default composeLayout(store, MainLayout);
